<template>
    <div class="column-detail-page w-75 mx-auto">
        <div class="column-info row mb-4 border-bottom pb-4 align-items-center" v-if="column">
            <div class="col-3 text-center">
                <img :src="column.avatar && column.avatar.url" :alt="column.title"
                    class="rounded-circle border w-100">
            </div>
            <div class="col-9">
                <h4>{{ column.title }}</h4>
                <p class="text-muted">{{ column.description }}</p>
            </div>
        </div>
        <PostList :list="list"></PostList>
    </div>
</template>
<script lang="ts" setup>
import PostList from '@/components/PostList.vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { computed,onMounted} from 'vue';
const route = useRoute()
const currentId = route.params.id
const store = useStore()
onMounted(() =>{
    store.dispatch('fetchColumnById',currentId)
    store.dispatch('fetchPostById',currentId)
})
//如果直接修改result，因为result为响应式数据，则会进入死循环监听
const column = computed(() => {
    const result = store.getters.getColumnById(currentId);
    if (result) {
        // 创建一个新对象，避免直接修改 result
        const avatarUrl = result.avatar?.url
            ? result.avatar.url + '?x-oss-process=image/resize,m_pad,h_50,w_50'
            : require('@/assets/column.jpg') + '?x-oss-process=image/resize,m_pad,h_50,w_50';
        return {
            ...result, // 保留其他字段
            avatar: {
                url: avatarUrl
            }
        };
    }
    return null; // 如果 result 不存在，返回 null
});

const list = computed(() => store.getters.getPostsByCid(currentId))
</script>
<style>

</style>